<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ADC / WebSockets</title>
        <script type="text/javascript" src="widgets/AnalogDisplay.js"></script>
        <style>
        * { font-family:tahoma; font-size:12px; padding:0px; margin:0px; }
        p { line-height:18px; }
        </style>

        <script type="text/javascript">
        /**
         * Warning: there is a first HTTP HandShake going on, that must follow the orasocket.js protocol.
         * See the request header:
         *   "tyrus-ws-attempt" = "Hand-Shake"
         *
         * Response headers will contain:
         *    "tyrus-fallback-transports"
         *    "tyrus-connection-id"
         *
         * FYI, tyrus is the name of the RI for JSR356.
         */
        var response = {};
        var displayValue;
        var statusFld;
        
        window.onload = function()
        {
          displayValue = new AnalogDisplay('valueCanvas', 100, 100,  10,  1, true, 40);
          statusFld = document.getElementById("status");
          
          console.log("Sending first (POST) request...");
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function() 
          {
            if (xhr.readyState == 4 && xhr.status == 200)  
            {
              response = JSON.parse(xhr.responseText);
              console.log(response);

              var headers = xhr.getAllResponseHeaders();
              console.log("All headers:\n" + headers);

              var supportedTransports = xhr.getResponseHeader("tyrus-fallback-transports");
              console.log("Transports:" + supportedTransports);

              var transports = supportedTransports.split(",");
              var preferredProtocol = "";
              for (var i=0; i<transports.length; i++)
              {
                console.log("Transport : " + transports[i] + " " + (transports[i] in window ? "": "NOT ") + "supported.");
                if (transports[i] in window)
                {
                  preferredProtocol = transports[i];
                  break;
                }                
              }

              if (preferredProtocol.length == 0)
                console.log("No protocol can be used...");
              else
                console.log("Preferred Protocol is " + preferredProtocol);

              var clientID = xhr.getResponseHeader("tyrus-connection-id");
              console.log("Client ID:" + clientID);
            }
          };
          xhr.open("POST", "/", true);
          xhr.setRequestHeader("tyrus-ws-attempt", "Hand-Shake"); // Means return the transport list, and my unique ID
          xhr.send();
        };

        </script>
    </head>
    <body>
      <table width="100%">
        <tr>
          <td valign="top"><h2>ADC on WebSocket</h2></td>
        </tr>
        <tr>
          <td align="left">
            <div id="status" style="padding:5px; background:#ddd; border-radius:5px; overflow-y: scroll; border:1px solid #CCC; margin-top:10px; height: 80px;">
              <!--i>Status will go here when needed...</i-->
            </div>
          </td>
        </tr>
        <tr>
          <td valign="top" align="right"><a href="" onclick="javascript:resetStatus(); return false;" title="Clear status board"><small>Reset Status</small></a></td>
        </tr>
        <tr>
          <td align="center" valign="top">
            <canvas id="valueCanvas" width="240" height="220" title="Potentiometer value"></canvas>
          </td>
        </tr>
      </table>  
      <hr>
      <script src="./client.js"></script>
    </body>
</html>
